﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@ 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet" />
</head>
<body class="layui-padding-3">
    <table class="layui-hide" id="ID-treeTable-demo"></table>
    <script type="text/html" id="TPL-treeTable-demo">
        <span>部门管理（Tree）</span>
        <div class="layui-btn-container" style="text-align:right;">
            <label>负责人</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="responsible" lay-verify="required" autocomplete="off" lay-reqtext="请输入负责人" lay-affix="clear" class="layui-input demo-phone">
            </div>
         <button type="button" class="layui-btn layui-btn-normal" id="searchBtn">
          <i class="layui-icon layui-icon-search"></i> 查询
        </button> 
         <button type="button" class="layui-btn layui-btn-green" id="searchBtn" lay-on="test-alert-btn">新建</button> 
            <button type="button" class="layui-btn layui-bg-blue" id="searchBtn">编辑</button>
            <button type="button" class="layui-btn layui-bg-red" id="searchBtn" >删除</button>
                  

        </div>
    </script>
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script>
    <script>
        var form = layui.form;
        var $ = layui.jquery;
        var treeTable, layer;
        // 先获取元素的值，此时元素已经在前面的HTML中定义了，能获取到
        var responsibleName = $("#responsible").val()?? '';

        layui.use('table',function () {
            treeTable = layui.treeTable;
            layer = layui.layer;
            // 获取分页参数
            var pageIndex = 1;
            var pageSize = 4;
            // 渲染函数，将查询操作封装在里面，方便点击查询按钮时调用
            function renderTable() {
                // 渲染
                var inst = treeTable.render({
                    elem: '#ID-treeTable-demo',
                    // 拼接上分页参数到URL
                    url: '@ViewBag.Keep' + '/api/Department/DepartmentList?OrgName=' + responsibleName + '&pageIndex=' + pageIndex + '&pageSize=' + pageSize,
                    tree: {
                        // 启用树形结构
                        iconIndex: 0, // 树节点的图标列，0表示使用第一列作为图标列
                        idField: 'orgId',  // 唯一标识字段
                        pidField: 'parentId',  // 父级字段
                        //childrenField: 'children'  // 默认情况下会自动从数据中读取 children 字段，所以不需要显式声明
                    }, 
                    maxHeight: '501px',
                    toolbar: '#TPL-treeTable-demo',
                    cols: [
                        [ 
                            { type: 'checkbox', fixed: 'left' },
                            {
                                field: 'orgId',
                                title: 'ID',
                                width: 80,
                                sort: true,
                                fixed: 'left',
                            },
                            { field: 'orgName', title: '组织名称', width: 180, fixed: 'left' },
                            { field: 'orgCode', title: '组织编码', width: 120 },
                            { field: 'createName', title: '创建人', width: 100 },
                            { field: 'createDate', title: '创建时间', width: 180, sort: true },
                            { field: 'updateName', title: '修改人', width: 100 },
                            { field: 'updateDate', title: '修改时间', width: 180, sort: true },
                        ]
                    ],
                    // page: true,
                    done: function (res, curr, count) {
                        // 处理返回的数据，treeTable 已经自动解析了树形结构
                        console.log(res); // 你可以在这里检查返回的数据结构是否符合预期
                    }
                });
            }

            // 页面加载完成先渲染一次表格（如果不需要初始加载可以去掉这行）
            renderTable();

            // 点击查询按钮的事件处理函数
            // function searchData() {
            //     // 重新渲染表格，以应用新的查询条件（负责人名称）
            //     renderTable();
            // }
            // 绑定查询按钮的点击事件，重新获取输入框的值并重新渲染表格
            $('#searchBtn').on('click', function () {
                 responsibleName = $("#responsible").val();
                renderTable();
            });
        });
        //弹框
        layui.use(function () {
            var layer = layui.layer;
            var util = layui.util;
            // 事件
            util.on('lay-on', {
                'test-alert-btn': function () {
                    layer.open({
                        type: 2,
                        area: ['900px', '600px'],
                        shadeClose: true,
                        title: '部门管理(Tree)(新增)',
                        content: '/Department/DepartmentAddView',
                    });
                }
            });
        });





    </script>
</body>
</html>
